<template>
  <div class="Page">
    <div class="hang">
      <div class="seach">
        <span @click="seachE"></span>
        <input type="text" v-model="seachText" class="top" />
      </div>
      <div class="Soutop">
        <router-link :to="{ path: '/recommend/userData' }">搜索条件</router-link>
      </div>
    </div>

    <div class="content">
      <a
        href="javascript:;"
        v-for="item in memberData"
        :key="item.id"
        @click="gotoJ21(item.id)"
      >
        <div class="nenrong">
          <div class="Itemimg">
            <img :src="item.headerImg" alt="" />
          </div>

          <router-link tag="div" class="menu" to="">
            <span
              >{{ item.name }}<img src="../../assets/img/77.png" alt=""
            /></span>
            <span
              >{{ item.age }}岁/{{ item.height }}/{{ item.xueli }}/{{
                item.income
              }}</span
            >
            <span>
              <button
                class="buttonA"
                v-for="(ij, index) in item.label"
                :key="index"
              >
                {{ ij }}
              </button>
            </span>
          </router-link>
        </div>

        <div class="subnav">
          <button type="text" class="hao" @click.stop="favarE">
            <span class="navmenu"><img src="../../assets/img/xin.png" /></span>
            <router-link to=""><span class="jiu-yi">发好感</span></router-link>
          </button>
          <button type="text" class="hao1" @click.stop="liuyanE">
            <span class="navmenu"><img src="../../assets/img/xin.png" /></span>
            <span class="jiu-yi">留言</span>
          </button>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "recommend",
  data() {
    return {
      seachText: "",
      memberData: [],
    };
  },
  watch: {
    // 会员等级发生变化重新。。。
    "$store.state.user.power": function () {
      this.hhh();
    },
  },
  created() {
    this.hhh();
  },
  methods: {
    hhh: function () {
      if (this.$store.state.user.power == 1) {
        for (let i = 0; i < 3; i++) {
          this.$set(this.memberData, i, this.$store.state.memberData[i]);
        }
      }

      if (this.$store.state.user.power == 2) {
        for (let i = 0; i < 5; i++) {
          this.$set(this.memberData, i, this.$store.state.memberData[i]);
        }
      }

      if (this.$store.state.user.power == 3) {
        for (let i = 0; i < 10; i++) {
          this.$set(this.memberData, i, this.$store.state.memberData[i]);
        }
      }
    },

    // 随机显示数据
    seachE: function () {
      var flower = ["身高", "年龄", "体重", "财产", "工作", "月薪", "颜值"];
      this.seachText = flower[Math.floor(Math.random() * flower.length)];
    },
    favarE: function () {
      // 这里写执行发送好感的操作
      this.$toast({
        message: "已发送好感",
        duration: 3000,
      });
    },
    liuyanE: function () {
      const { power } = this.$store.state.user;
      if (power < 2) {
        alert("你的权限等级不够");
        return;
      }
      this.$toast({
        message: "正在留言",
        duration: 3000,
      });
    },
    gotoJ21: function (memberId) {
      this.$router.push("/recommend/userInfo");
      // 根据memberId获取是哪个会员的数据
      console.log(memberId);
    },
  },
};
</script>

<style lang='scss' scoped>
a {
  text-decoration: none;
  color: black;
}
.hang {
  display: flex;
  height: 50px;
  background-color: #26a2ff;
  color: white;
  border-bottom: 2px solid rgb(219, 219, 219);
}
.seach {
  position: relative;
}
.seach span {
  position: absolute;
  top: 15px;
  left: 28px;
  width: 25px;
  height: 25px;
  background: url("../../assets/img/sou.png") no-repeat;
  background-size: 25px 25px;
}
.top {
  width: 200px;
  height: 30px;
  display: block;
  margin-top: 10px;
  margin-left: 20px;
  padding: 0px 10px 0px 40px;
  border: 1px solid rgb(199, 199, 199);
  background-color: rgb(235, 235, 235);
  border-radius: 40px;
  outline: none;
}
.Soutop{
  color: white;
  flex: 1;
  text-align: right;
  margin-top: 15px;
  margin-right: 30px;
  text-decoration: none;
  a{
    color: white;
  }
}
.nenrong {
  width: 100%;
  height: 130px;
  display: flex;
  flex-flow: row;
}
.Itemimg{
  flex: 1;
}
.Itemimg img {
  width: 100px;
  height: 100px;
  margin-top: 15px;
  margin-left: 20px;
}
.menu {
  flex: 2;
  margin-left: 5px;
}
.menu img {
  width: 20px;
  height: 17px;
  padding-left: 5px;
}
.menu span {
  display: block;
  margin-top: 15px;
  text-align: left;
}
.menu .buttonA {
  border-radius: 30px;
  background-color: rgb(218, 218, 218);
  border: 1px solid aliceblue;
  margin: 0px 5px 0px 0px;
}
.subnav {
  display: flex;
  height: 40px;
  font-size: 16px;
  padding: 0 15px;
}

.subnav span {
  display: block;
  flex: 1;
}

.subnav button {
  flex: 1;
  display: flex;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(190, 190, 190);
}

.navmenu {
  flex: 1;
}
.navmenu img {
  width: 30px;
  height: 30px;
  margin-left: 40px;
}
.jiu-yi {
  width: 100%;
  height: 30px;
  margin-right: 50px;
  margin-top: 5px;
  margin-left: 5px;
  font-size: 16px;
}


</style>
